<template>
  <div>
    <vxe-table
      border="inner"
      show-overflow
      row-id="id"
      ref="xTree"
      align="center"
      header-align="center"
      :data="data1"
      @toggle-tree-expand="toggleExpandChangeEvent"
      :tree-config="{children: 'children'}">
      <vxe-table-column type="seq" width="150" title="序号" tree-node></vxe-table-column>
      <vxe-table-column field="title" title="机构名称" width="280" tree-node></vxe-table-column>
      <vxe-table-column field="succ" title="社会统一信用代码" width="280"></vxe-table-column>
      <vxe-table-column field="contacts" title="法人" width="180"></vxe-table-column>
      <vxe-table-column field="organization_type" title="机构类型" width="280"></vxe-table-column>
      <vxe-table-column field="date" title="操作">
        <template v-slot="{ row }">
          <Button v-if="row.children.length == 0" type="primary" size="small" class="actionBtn" @click="imgALLData(row)">编辑</Button>
          <Button v-if="row.children.length == 0" type="success" size="small" class="actionBtn" @click="getSession(row)">历届信息</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Modal title="机构信息" v-model="communityInfoShow" @on-ok="createCommunityInfo" @on-cancel="communityInfoShow=false" width="700">
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">统一社会信用代码:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.succ" class="div-search" placeholder="请输入统一社会信用代码"></Input>
        </Col>
      </Row>
      <!--      所在区县、街道-->
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">所在区县:</Col>
        <Col span="10" offset="1">
<!--          <Select disabled v-model="paramData.CPWI023" filterable transfer="" @on-change="getRegionList(paramData.CPWI023, 1)">-->
<!--            <Option :value="item.CPSR001" v-for="item in reginList[0]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
<!--          </Select>-->
          <Select disabled v-model="paramData.CPWI023" filterable transfer="" clearable @on-change="getMailList2(4,paramData.CPWI023)" style="width:70%">
            <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">所在街道:</Col>
        <Col span="10" offset="1">
<!--          <Select disabled v-model="paramData.CPWI024" filterable transfer="" @on-change="getRegionList(paramData.CPWI024, 2)">-->
<!--            <Option :value="item.CPSR001" v-for="item in reginList[1]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
<!--          </Select>-->
          <Select disabled v-model="paramData.CPWI024" filterable transfer="" clearable @on-change="getMailList2(5, paramData.CPWI024)" style="width:70%">
            <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">所在社区:</Col>
        <Col span="10" offset="1">
<!--          <Select disabled v-model="paramData.CPWI025" filterable transfer="">-->
<!--            <Option :value="item.CPSR001" v-for="item in reginList[2]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
<!--          </Select>-->
          <Select disabled v-model="paramData.CPWI025" filterable transfer="" clearable style="width:70%">
            <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">组织名称:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.cname" class="div-search" placeholder="请输入组织名称"></Input>
        </Col>
      </Row>
      <!--      机构类型-->
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">机构类型:</Col>
        <Col span="10" offset="1">
          <RadioGroup v-model="paramData.organization_type">
            <Radio label="1">村民委员会</Radio>
            <Radio label="2">居民委员会</Radio>
          </RadioGroup>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">详细地址（住所）:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.address" class="div-search" placeholder="请输入详细地址（住所）"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">原组织机构代码:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.old_company_code" class="div-search" placeholder="请输入原组织机构代码"></Input>
        </Col>
      </Row>
      <!--有效期限开始、结束   核准日期-->
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">有效期限（始）:</Col>
        <Col span="10" offset="1">
          <DatePicker type="date"  v-model="paramData.start_time" :transfer=true></DatePicker>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">有效期限（终）:</Col>
        <Col span="10" offset="1">
          <DatePicker type="date"  v-model="paramData.end_time" :transfer=true></DatePicker>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">核准日期:</Col>
        <Col span="10" offset="1">
          <DatePicker type="date"  v-model="paramData.approval_time" :transfer=true></DatePicker>
        </Col>
      </Row>
      <Divider>法人信息</Divider>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">法人:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.contacts" class="div-search" placeholder="请输入联系人"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">联系方式:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.mobile" class="div-search" placeholder="请输入联系电话"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">证件号码:</Col>
        <Col span="10" offset="1">
          <Input v-model="paramData.card_no" class="div-search" placeholder="请输入联系电话"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">民族:</Col>
        <Col span="10" offset="1">
          <Select v-model="paramData.CPBI007" filterable transfer="">
            <Option :value="item.TYPECODE" v-for="item in dictList[4]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">党员:</Col>
        <Col span="10" offset="1">
          <RadioGroup v-model="paramData.party_member">
            <Radio label="1">是</Radio>
            <Radio label="0">否</Radio>
          </RadioGroup>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">学历:</Col>
        <Col span="10" offset="1">
          <Select v-model="paramData.CPEI004" filterable transfer="">
            <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">兼任书记:</Col>
        <Col span="10" offset="1">
          <RadioGroup v-model="paramData.secretary">
            <Radio label="1">是</Radio>
            <Radio label="0">否</Radio>
          </RadioGroup>
        </Col>
      </Row>
    </Modal>
    <Modal title="历届信息" v-model="sessionShow" @on-ok="OK111" @on-cancel="sessionShow=false" width="1000">
      <div>
        <Table stripe :columns="columns2" :data="data2"></Table>
      </div>
    </Modal>
  </div>
</template>
<script>
import { findCommunityList, getOffice, getCommunityInfo, createCommunityInfo, date2str, getRegionList, getTypeNameList, getSessionList } from '@/api/eventlist'
export default {
  data() {
    return {
      data1: [],
      data2: [],
      columns2: [
        { title: '序号', type: 'index', width: 50, align: 'center'},
        { title: '法人姓名', key: 'contacts', minWidth: 90, align: 'center' },
        { title: '证件号码', key: 'card_no', minWidth: 90, align: 'center' },
        { title: '联系方式', key: 'mobile', minWidth: 90, align: 'center' },
        { title: '有效期（始）', key: 'start_time', minWidth: 90, align: 'center' },
        { title: '有效期(终)', key: 'end_time', minWidth: 90, align: 'center' },
        { title: '民族', key: 'nation', minWidth: 90, align: 'center' },
        { title: '党员', key: 'party_member', minWidth: 90, align: 'center' },
        { title: '学历', key: 'education', minWidth: 90, align: 'center' },
        { title: '党组织书记', key: 'secretary', minWidth: 90, align: 'center' }
      ],
      company_code: this.$store.state.user.severUserInfo.company_code,
      id: this.$store.state.user.severUserInfo.company_id,
      communityInfoShow: false,
      sessionShow: false,
      paramData: {},
      reginList: [[], [], []],
      dictList: [],
      mailList3: [],
      mailList2: [],
      mailList1: []
    }
  },
  methods: {
    init() {
      let params = {
        company_code: this.company_code,
        id: this.id
      }
      findCommunityList(params).then(res => {
        if (res.data.errcode === 0) {
          this.data1 = res.data.data
        } else {
          alert('失败')
        }
      })
    },
    toggleExpandChangeEvent ({ row, expanded }) {
      console.log('节点展开事件' + expanded)
    },
    imgALLData(item) {
      console.log(item.children, '000000')
      this.communityInfoShow = true
      getCommunityInfo(item).then(res => {
        if (res.data.errcode === 0) {
          this.paramData = res.data.data
          if (this.paramData.CPWI023) {
            this.getMailList2( 4,this.paramData.CPWI023)
            if (this.paramData.CPWI024) {
              this.getMailList2(5,this.paramData.CPWI024)
            }
          }
        }
      })
    },
    getSession(item) {
      this.sessionShow = true
      let that = this
      getSessionList(item).then(res => {
        if (res.data.errcode === 0) {
          this.getTypeName('nation', 4)
          this.getTypeName('degree', 7)
          res.data.data.forEach(function (item) {
            that.dictList[4].forEach(function (index) {
              if (item.CPBI007 === index.TYPECODE) {
                item.nation = index.TYPENAME
              }
            })
            that.dictList[7].forEach(function (index) {
              if (item.CPEI004 === index.TYPECODE) {
                item.education = index.TYPENAME
              }
            })
          })
          this.data2 = res.data.data
        }
      })
    },
    OK111() {
      this.sessionShow = false
    },
    createCommunityInfo() {
      this.paramData.start_time = date2str(this.paramData.start_time)
      this.paramData.end_time = date2str(this.paramData.end_time)
      this.paramData.approval_time = date2str(this.paramData.approval_time)
      createCommunityInfo(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功' })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败', desc: '' })
        }
      })
    },
    getRegionList (id, index) {
      getRegionList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.reginList[index] = res.data.data
          this.$forceUpdate()
        } else {
          this.$Notice.error({
            title: '获取区域列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      this.getTypeName('political', 0)
      this.getTypeName('position', 1)
      this.getTypeName('cpbi018', 2)
      this.getTypeName('marriage', 3)
      this.getTypeName('nation', 4)
      this.getTypeName('incumbency', 5)
      this.getTypeName('sp_status', 6)
      this.getTypeName('degree', 7)
      this.getTypeName('academic', 8)
      this.getTypeName('lineal', 9)
      this.getTypeName('pqoswt', 10)
      this.getTypeName('train', 11)
      this.getTypeName('examType', 12)
      this.getTypeName('examresult', 13)
    },
    // 社区统计下拉搜索框的级联查询
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
          let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
          this.mailList1.push(xiehui)
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
            let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
            this.mailList2.push(xiehui)
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted() {
    this.init()
    this.getRegionList('', 0)
    // this.getDictList()
    this.getMailList(2, null)
    // if (this.companyGrade < 3) {
    //   this.getMailList(2, null)
    // } else if (this.companyGrade < 4) {
    //   this.getMailList2(4, this.companyCode)
    // } else if (this.companyGrade < 5) {
    //   this.getMailList2(5, this.companyCode)
    // }
    // this.getRegionList(this.$store.state.user.severUserInfo.company_code, 1)
    // this.getRegionList(this.$store.state.user.severUserInfo.company_code, 2)
    // this.getRegionList(this.$store.state.user.severUserInfo.parent_code, 3)
  }
}
</script>
<style>
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .actionBtn {
    margin-right: 5px;
    margin-bottom: 5px;
  }
</style>
